<template>
  <!-- #ifdef H5 -->
  <el-switch
    v-model="bindValue"
    :disabled="disabled"
    :loading="loading"
    :size="size"
    :width="width"
    :inline-prompt="inlinePrompt"
    :active-icon="activeIcon"
    :inactive-icon="inactiveIcon"
    :active-text="activeText"
    :inactive-text="inactiveText"
    :active-value="activeValue"
    :inactive-value="inactiveValue"
    :active-color="activeColor"
    :inactive-color="inactiveColor"
    :border-color="borderColor"
    :before-change="beforeChange"
    @change="onChange"
  ></el-switch>
  <!-- #endif -->
</template>
<script setup>
// #ifdef H5
import { ElSwitch } from "element-plus";
import "element-plus/theme-chalk/el-switch.css";
// #endif
import { computed, watch,ref } from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
  },
  disabled: {
    type: Boolean,
  },
  loading: {
    type: Boolean,
  },
  size: {
    type: String,
  },
  width: {
    type: Number,
  },
  inlinePrompt: {
    type: Boolean,
  },
  activeIcon: {
    type: [String, Object],
  },
  inactiveIcon: {
    type: [String, Object],
  },
  activeText: {
    type: String,
  },
  inactiveText: {
    type: String,
  },
  activeValue: {
    type: [Boolean, String, Number],
    default: true,
  },
  inactiveValue: {
    type: [Boolean, String, Number],
    default: false,
  },
  activeColor: {
    type: String,
    default: "#409EFF",
  },
  inactiveColor: {
    type: String,
    default: "#C0CCDA",
  },
  borderColor: {
    type: String,
  },
  beforeChange: {
    type: Function,
    default: () => true,
  },
});
const bindValue = ref(false);
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
      bindValue.value = newVal
  },
  { immediate: true }
);
const emits = defineEmits(["update:modelValue"]);
const onChange = (val) => {
  emits("update:modelValue", val);
};
</script>
<style lang="scss" scoped></style>
